<template>
  <div class="fs-blog-card" @click="$router.push(`/article/${props.articleDetail.id}`)">
    <div class="card-cover">
      <fs-image :lazy="true" :src="props.articleDetail.cover.path" />
    </div>
    <div class="card-info">
      <div class="card-info-top">
        <div class="info-title">{{ props.articleDetail.title }}</div>
        <div class="info-category">{{ props.articleDetail.category.name }}</div>
      </div>
      <div class="card-info-time">{{ moment(props.articleDetail.createdAt).format("YYYY.MM.DD") }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IArticle } from "@/types/content/articleType";
import FsImage from "@/components/FsImage/FsImage.vue";
import moment from "moment";

const props = defineProps<{
  articleDetail: IArticle;
}>();
</script>

<style scoped lang="scss">
.fs-blog-card {
  padding: 16px;
  .card-cover {
    width: 100%;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    &-img {
      width: 100%;
      height: 100%;
    }
  }
  .card-info {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 10px;
    .card-info-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5px;
      .info-category {
        color: #f00;
      }
    }
    .card-info-time {
      color: var(--font-light-color);
    }
  }
}
</style>
